<template>
  <div class="talker-item">
    <div class="avatar"><img :src="userInfo.avatar" alt=""></div>
    <div class="item-right">
      <div class="item-right-top" v-if="chat.sort === 1">
        <span class="user-name">{{ userInfo.userName }}</span>
        <span class="time">{{ chat.updatedAt }}</span>
      </div>
      <div class="message-container" v-if="chat.type == 0">
        <pre class="message" v-html="content"></pre>
      </div>
      <div class="image" v-else-if="chat.type == 1 || chat.type == 3" @click.right.prevent="rightClickPic($event, chat.content)" :style="imgStyle">
        <img :src="chat.content" alt="" @dragstart.prevent @click.stop="(e)=>{$bus.$emit('viewPicture', e.target)}">
      </div>
      <download-card v-else-if="chat.type == 2" :file="chat.content" :fileInfo="fileInfo"></download-card>
    </div>
  </div>
</template>

<script>
import { transToTag } from '@/utils/utils'
import DownloadCard from '@/components/DownloadCard.vue'

export default {
  name: "talker-item",
  components: { DownloadCard },
  props: {
    chat: {
      type: Object,
      default () {
        return {
        }
      }
    }
  },
  data () {
    return {
      // 用户信息
      userInfo: {},
    }
  },
  created () {
    // 如果是私聊  用户信息可以直接从session里面取
    if (this.$store.state.currentSession.type === 0) {
      this.userInfo = this.$store.state.currentSession.user;
    }
  },
  methods: {
    // 右键点击图片的回调
    rightClickPic (e, src) {
      // console.log(e);
      this.$bus.$emit('rightMenu', {
        position: { x: e.x, y: e.y },
        menuList: [{
          content: '收藏至自定义表情',
          callback: () => { this.$bus.$emit('addEmoticon', src) },
        }]
      })
    },

  },
  computed: {
    content () {
      return transToTag(this.chat.content)
    },

    imgStyle () {
      let reg = /\??size=([0-9]{1,3}x[0-9]{1,3})&?/;
      let arr = this.chat.content.match(reg)[1].split('x')
      return `width:${arr[0]}px;height:${arr[1]}px;`
    },

    // 文件
    fileInfo () {
      return JSON.parse(this.chat.others)
    },

  },

}
</script>

<style scoped>
.talker-item {
  display: flex;
  justify-content: flex-start;
  margin: 15px 0;
}

.avatar {
  margin-right: 10px;
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.message-container {
  position: relative;
  background-color: #ffffff;
  border-radius: 4px;
  border: 1px solid #eee;
}

.message {
  padding: 8px 13px;
  font-size: 14px;
  width: fit-content;
  font-family: "Harmony Font";
  word-break: break-word;
  white-space: pre-wrap;
  text-align: left;
  margin: 0;
}

.message::selection {
  background-color: #279fdb;
}

.message-container::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 7px;
  height: 4px;
  width: 4px;
  transform: rotateZ(-45deg);
  background-color: inherit;
  border-top: 1px solid #eee;
  border-left: 1px solid #eee;
}

.message-container:hover {
  background-color: #f6f6f6;
}

.image img {
  max-height: 200px;
  max-width: 200px;
  min-height: 50px;
  min-width: 50px;
  border-radius: 5px;
  border: 1px solid #eee;
  object-fit: cover;
  width: 100%;
  cursor: pointer;
  background-color: #fff;
}

.item-right > div,
.avatar {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
}
</style>